"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

import { Search, Edit, Trash2, MoreHorizontal, Eye } from "lucide-react"

interface ExperimentData {
  id: number
  experimentName: string
  cropType: string
  customCrop?: string
  collector: string
  location: string
  date: string
  temperature: string
  humidity: string
  soilMoisture: string
  lightIntensity: string
  notes: string
  files: File[]
  status: string
  createdAt: string
}

interface DataManagementProps {
  experimentData: ExperimentData[]
}

export function DataManagement({ experimentData }: DataManagementProps) {
  const [searchTerm, setSearchTerm] = useState("")
  const [filteredData, setFilteredData] = useState(experimentData)

  const handleSearch = (term: string) => {
    setSearchTerm(term)
    const filtered = experimentData.filter(
      (item) =>
        item.experimentName.toLowerCase().includes(term.toLowerCase()) ||
        item.cropType.toLowerCase().includes(term.toLowerCase()) ||
        item.location.toLowerCase().includes(term.toLowerCase()),
    )
    setFilteredData(filtered)
  }

  useEffect(() => {
    setFilteredData(experimentData)
  }, [experimentData])

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "已完成":
        return <Badge>已完成</Badge>
      case "进行中":
        return <Badge variant="secondary">进行中</Badge>
      case "准备中":
        return <Badge variant="outline">准备中</Badge>
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

  return (
    <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>实验数据记录</CardTitle>
              <CardDescription>共 {filteredData.length} 条记录</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex items-center space-x-2 mb-4">
                <div className="relative flex-1 max-w-sm">
                  <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input
                    placeholder="搜索实验名称、作物类型或地点..."
                    value={searchTerm}
                    onChange={(e) => handleSearch(e.target.value)}
                    className="pl-8"
                  />
                </div>
              </div>

              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>实验名称</TableHead>
                      <TableHead>作物类型</TableHead>
                      <TableHead>采集人</TableHead>
                      <TableHead>地点</TableHead>
                      <TableHead>采集日期</TableHead>
                      <TableHead>温度(°C)</TableHead>
                      <TableHead>湿度(%)</TableHead>
                      <TableHead>土壤湿度(%)</TableHead>
                      <TableHead>光照(lux)</TableHead>
                      <TableHead>状态</TableHead>
                      <TableHead className="w-[50px]">操作</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredData.length === 0 ? (
                      <TableRow>
                        <TableCell colSpan={11} className="text-center text-muted-foreground py-8">
                          暂无数据，请先在数据采集页面录入实验数据
                        </TableCell>
                      </TableRow>
                    ) : (
                      filteredData.map((item) => (
                        <TableRow key={item.id}>
                          <TableCell className="font-medium">{item.experimentName}</TableCell>
                          <TableCell>{item.cropType === "other" ? item.customCrop : item.cropType}</TableCell>
                          <TableCell>{item.collector}</TableCell>
                          <TableCell>{item.location}</TableCell>
                          <TableCell>{item.date}</TableCell>
                          <TableCell>{item.temperature || "-"}</TableCell>
                          <TableCell>{item.humidity || "-"}</TableCell>
                          <TableCell>{item.soilMoisture || "-"}</TableCell>
                          <TableCell>{item.lightIntensity || "-"}</TableCell>
                          <TableCell>{getStatusBadge(item.status)}</TableCell>
                          <TableCell>
                            <DropdownMenu>
                              <DropdownMenuTrigger asChild>
                                <Button variant="ghost" className="h-8 w-8 p-0">
                                  <MoreHorizontal className="h-4 w-4" />
                                </Button>
                              </DropdownMenuTrigger>
                              <DropdownMenuContent align="end">
                                <DropdownMenuItem>
                                  <Eye className="mr-2 h-4 w-4" />
                                  查看详情
                                </DropdownMenuItem>
                                <DropdownMenuItem>
                                  <Edit className="mr-2 h-4 w-4" />
                                  编辑
                                </DropdownMenuItem>
                                <DropdownMenuItem className="text-destructive">
                                  <Trash2 className="mr-2 h-4 w-4" />
                                  删除
                                </DropdownMenuItem>
                              </DropdownMenuContent>
                            </DropdownMenu>
                          </TableCell>
                        </TableRow>
                      ))
                    )}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
    </div>
  )
}
